<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/bloglist.css">
    <script src = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
    <!--这是一个导航栏-->
    <div class="nav">
        <img src="image/logo.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!--这个标签仅仅用于占位，把我们的a标签挤到右面去-->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="logout">注销</a>
    </div>
    <!--页面主体部分-->
    <div class="container">

    <!--左侧信息-->
    <div class="container-left">
        <div class="card">
            <img src="image/BLOG-头像.png" alt="">
            <h2></h2>
            <a href="#">github</a>
            <div class="counter">
                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="counter">
                <span>2</span>
                <span>1</span>


            </div>
        </div>


    </div>


    <!--右侧信息-->
    <div class="container-right">
        <!--表示一篇博客-->
       <!-- <div class="blog">
           <div class="title">我的第一篇博客</div>
          <div class="date">2023-12-11</div> 
          <div class="desc">好好学习Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores quod iusto possimus in nisi voluptate iste necessitatibus facere, sequi saepe, porro debitis aspernatur autem aperiam temporibus a voluptatum explicabo culpa.
          </div>
          <a href="#">查看全文 &gt;&gt;</a>
      </div> -->

    </div>

</div>
<script src="js/app.js"></script>
<script>
        //把这样的代码封装到函数中
        //js中定义函数，使用function关键字，不必写返回值类型，括号里是形参列表，也不必写类型。
    function getBlogs(){
        $.ajax({
            type:'get',
            url:'blog',
            success:function(body){
                //服务器成功响应之后，调用的回调函数
                let containerDiv = document.querySelector('.container-right');
                for(let i = 0;i < body.length;i++){
                    let blog = body[i];

                    //构建整个博客
                    let blogDiv = document.createElement('div');
                    blogDiv.className = 'blog';
                    //构建标题
                    let titleDiv = document.createElement('div');
                    titleDiv.className = 'title';
                    titleDiv.innerHTML = blog.title;
                    //构建发布时间
                    let dateDiv = document.createElement('div');
                    dateDiv.className = 'date';
                    dateDiv.innerHTML = blog.postTime;

                    //构建博客摘要
                    let descDiv = document.createElement('div');
                    descDiv.className = 'desc';
                    descDiv.innerHTML = blog.content;

                    //构造查看全文按钮

                    let a = document.createElement("a");
                    a.innerHTML = '查看全文 &gt;&gt;'
                    //点击不同的博客跳转不同
                    a.href = 'blog_detail.html?blogId=' + blog.blogId;

                    //零件创建好之后要进行组装
                    blogDiv.appendChild(titleDiv);
                    blogDiv.appendChild(dateDiv);
                    blogDiv.appendChild(descDiv);
                    blogDiv.appendChild(a);

                    //把blogDiv最终组到页面上
                    containerDiv.appendChild(blogDiv);
                }
                   

            }

        });
    }
    //定义完函数，还需要调用才能执行
    getBlogs(); 
    
    

    getLoginStatus();

    //获取当前登录的用户信息
    function getUserInfo(){
        $.ajax({
            type:'get',
            url:'userInfo',
            success:function(user){
                //把拿到的响应数据，取出其中的username，设置到页面的h2标签中
                let h2 = document.querySelector('.card h2');
                h2.innerHTML = user.username;

            }
        });

    }
    getUserInfo();

</script>
</body>
</html>